<template>
  <div class="drop-down" ref="tt">
    <select v-model="selectData" @change="changeSelect">
      <option v-for="(item, i) in arr" :key="i" :value="item">
        {{typeof item === 'object' ? item.name : item}}
      </option>
    </select>
    <select v-if="cityData.length" v-model="selectCity">
      <option v-for="(city, i) in cityData" :key="i" :value="city">{{city}}</option>
    </select>
  </div>
</template>
<script>
export default {
  name: 'DropDown',
  props: ['list'],
  data () {
    return {
      arr: [],
      selectProvince: '',
      selectCity: '',
      cityData: []
    }
  },
  created () {
    this.arr = this.$props.list || []
  },
  methods: {
    changeSelect (e) {
      if (typeof this.selectData === 'object' ) {
        this.cityData = [];
        for (let key in this.selectData) {
          if (key !== 'name') {
            this.cityData.push(this.selectData[key])
          }
        }
      }
    }
  }
}
</script>
<style scoped>

</style>
